{% extends 'base/base.html' %}
{% load static %}

{% block content %}
    <div class="hero-wrap hero-bread" style="background-image: url({% static 'images/bg_1.jpg' %});">
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-9 ftco-animate text-center">
          	<p class="breadcrumbs"><span class="mr-2"><a href="{% url 'home' %}">Home</a></span> <span>Products</span></p>
            <h1 class="mb-0 bread">Products</h1>
          </div>
        </div>
      </div>
    </div>

    <section class="ftco-section">
    	<div class="container">
    		<div class="row justify-content-center">
    			<div class="col-md-10 mb-5 text-center">
    				<ul class="product-category">
              {% if category %}
                <li><a href="{% url 'shop' %}">All</a></li>
              {% else %}
                <li><a href="#" class="active">All</a></li>
              {% endif %}

              {% for ctg in categories %}
                {% if ctg.name == category %}
    					    <li><a href="#" class="active">{{ ctg.name }}</a></li>
                {% else %}
                  <li><a href="?cate={{ctg.name}}">{{ ctg.name }}</a></li>
                {% endif %}
              {% endfor %}
    				</ul>
    			</div>
    		</div>
    		<div class="row">
          {% if products %}
          {% for product in products %}
          {% if product.category.name == category or not category %}
            <div class="col-md-6 col-lg-3 ftco-animate">
              <div class="product">
                <a href="{% url 'product-details' product.id %}" class="img-prod"><img class="img-fluid" src="{{ product.photo.url }}" alt="Colorlib Template">
                  <div class="overlay"></div>
                </a>
                <div class="text py-3 pb-4 px-3 text-center">
                  <h3><a href="{% url 'product-details' product.id %}">{{ product.name }}</a></h3>
                  <div class="d-flex">
                    <div class="pricing">
                      <p class="price"><span>${{ product.price }}</span></p>
                    </div>
                  </div>
                  <div class="bottom-area d-flex px-3">
                    <div class="m-auto d-flex">
                      <a href="#" class="add-to-cart d-flex justify-content-center align-items-center text-center">
                        <span><i class="ion-ios-menu"></i></span>
                      </a>
                      <a href="{% url 'cart' %}" class="buy-now d-flex justify-content-center align-items-center mx-1">
                        <span><i class="ion-ios-cart"></i></span>
                      </a>
                      <a href="#" class="heart d-flex justify-content-center align-items-center ">
                        <span><i class="ion-ios-heart"></i></span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
          {% endfor %}
          {% else %}
          <p>There is No Product Here!</p>
          {% endif %}
    		</div>
    		<div class="row mt-5">
          <div class="col text-center">
            <div class="block-27">
              {% if products.has_other_pages %}
                <ul>
                  <!-- 上一页 
                  {% if products.has_previous %}
                    <li><a href="?page={{products.previous_page_number}}">&lt;</a></li>
                  {% else %}
                    <li><span>&lt;</span></li>
                  {% endif %}
                  -->

                  <!-- 中间页 -->
                  {% for i in products.paginator.page_range %}
                  
                    {% if products.number == i %}
                      <li class="active"><span>{{ i }}</span></li>
                    {% else %}
                      <li><a href="?page={{i}}">{{ i }}</li>
                    {% endif %}
                  {% endfor %}

                  <!-- 下一页 
                  {% if products.has_next %}
                    <li><a href="?page={{products.next_page_number}}">&gt;</a></li>
                    {% else %}
                    <li><span>&gt;</span></li>
                  {% endif %}
                  -->
                </ul>
              {% endif %}
            </div>
          </div>
        </div>
    	</div>
    </section>

		<section class="ftco-section ftco-no-pt ftco-no-pb py-5 bg-light">
      <div class="container py-4">
        <div class="row d-flex justify-content-center py-5">
          <div class="col-md-6">
          	<h2 style="font-size: 22px;" class="mb-0">Subcribe to our Newsletter</h2>
          	<span>Get e-mail updates about our latest shops and special offers</span>
          </div>
          <div class="col-md-6 d-flex align-items-center">
            <form action="#" class="subscribe-form">
              <div class="form-group d-flex">
                <input type="text" class="form-control" placeholder="Enter email address">
                <input type="submit" value="Subscribe" class="submit px-3">
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
{% endblock %}
